<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="bulma.css">
	<style>
		
	</style>
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
    <div class="tabs">
    	<ul>
		    <li v-for="(index,text) in texts" :class="{'is-active':currentIndex===index}" @click='doClick(index)'><a>{{text}}</a></li>
		 </ul>
    </div>
    <div class="tab-content">
	   <div v-for="(index,ptext) in pTexts" v-if='index===currentIndex'>
	   	<p>{{ptext}}</p>
	   </div>
  </div>
</div>
<script>
	var vm = new Vue({
		el : '#root',
		data : {
			texts : ['Home','Profile','Messages','Settings'],
			pTexts : ['Food truck fixie locavore, accusamus mcsweeneys marfa nulla single-origin coffee squidExercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.','Accessible tooltips for keyboard and assistive technology usersFor users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a tabindex="0" attribute.','How to position the tooltip - top | bottom | left | right | auto.When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.','Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'],
			currentIndex : 0,
		},
		methods : {
			doClick : function(index){
				this.currentIndex = index;
			}
		}
	})
</script>	
</body>
</html>